<template>
  <footer v-if="list" class="v-footer">
    <section class="v-footer-inner" :style="{'background-color': bgcolor, height: height }">
      <ul class="v-footer-inner-content">
        <li v-for="(item, index) in list.filter((ite) => ite.show)" :key="index">
          <div class="icon">
            <img :src="location == item.location ? getActiveIcon(item) : item.icon">
          </div>
          <div class="label" :style="{'color': location == item.location ? getThemeColor() : textcolor}">{{ item.name }}</div>
        </li>
      </ul>
    </section>
  </footer>
</template>
<script>
import mixins from './../mixins'
import request from '@/utils/request'
export default {
  name: 'VFooter',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
        return {
          height: 88,
          bgcolor: '',
          textcolor: '',
          dataorigin: '1',
          fixedData: []
        }
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      location: '',
      theme: 'theme-one'
    }
  },
  computed: {
    height() {
      return this.px2rem(this.option.height || 88)
    },
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    textcolor() {
      return this.option.textcolor || '#333'
    }
  },
  async created() {
    if (this.isInitData) {
      await this.getTheme()
    }
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = [
        {
          name: '首页',
          show: true
        },
        {
          name: '我的',
          show: true
        }
      ]
    }
  },
  methods: {
    setData(result) {
      if (this.option.dataorigin === '1') {
        this.list = result?.dataList?.data
      } else {
        if (result.data.code === '200') {
          try {
            this.list = JSON.parse(result.data.data.configValue)
          } catch (e) {
            this.list = []
          }
        } else {
          this.list = []
        }
      }
    },
    getThemeColor() {
      switch (this.theme) {
        case 'theme-one':
          return '#eb523c'
        case 'theme-two':
          return '#2f74eb'
        case 'theme-three':
          return '#2DA7B5'
        default:
          return '#eb523c'
      }
    },
    getActiveIcon(item) {
      switch (this.theme) {
        case 'theme-one':
          return item.themeOne
        case 'theme-two':
          return item.themeTwo
        case 'theme-three':
          return item.themeThree
        default:
          return item.themeOne
      }
    },
    getTheme() {
      return new Promise((resolve, reject) => {
        request({
          baseURL: '/API-ENTERPRISE-APP/',
          url: 'app/sysConfig/getByName',
          method: 'post',
          data: {
            name: 'THEME_COLOR'
          }
        }).then(res => {
          this.theme = res.data.data.configValue
          resolve()
        }).catch(err => {
          resolve()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.v-footer {
  &-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: rem(98);

    &::before {
      content: '';
      background-color: $f6;
      height: 1px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
    }
    &-content {
      flex: 1;
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      box-sizing: border-box;
      > li {
        display: flex;
        align-items: center;
        flex: 1;
        flex-direction: column;
        box-sizing: border-box;
        .icon {
          width: rem(48);
          display: inline-flex;
          margin-bottom: rem(8);
          > img {
            width: 100%;
          }
        }
        .label {
          font-size: rem(20);
        }
      }
    }
  }
}
</style>
